<template>
  <div class="customer-management-table">
    <el-table
    ref="multipleTable"
    :data="dataList"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="FnSelection">
    <el-table-column
      type="selection"
      >
    </el-table-column>
    <el-table-column
      :label="lableList.n1"
      v-if="lableList.n1"
      >
      <template slot-scope="scope">
        <span class="img-box">
          <img :src="scope.row.n1" alt="">
        </span>
      </template>
    </el-table-column>
    <el-table-column
      :label="lableList.headImg"
      v-if="lableList.headImg"
      >
      <template slot-scope="scope">
        <span class="img-box" @click="FnEmit(scope)">
          <img :src="scope.row.headImg" alt="">
        </span>
      </template>
    </el-table-column>
    <el-table-column
      :label="lableList.n2"
      v-if="lableList.n2"
      >
      <template slot-scope="scope">
        <span class="name">
          {{ scope.row.n2 }}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      :label="lableList.n3"
      v-if="lableList.n3"
      >
      <template slot-scope="scope">
        <span>{{ scope.row.n3 }}</span>
        </template>
    </el-table-column>
    <el-table-column
      :label="lableList.sex"
      v-if="lableList.sex"
      >
      <template slot-scope="scope">
        <!-- 男 -->
        <span v-if='scope.row.sex==1'>
          男
          <i class="iconfont sex1" >&#xe639;</i>
        </span>
        <!-- 女 -->
        <span v-else-if='scope.row.sex==2'>
          女
          <i class="iconfont sex2" >&#xe616;</i>
        </span>
        <span v-else>未知</span>
        </template>
    </el-table-column>
    <el-table-column
      :label="lableList.n4"
      v-if="lableList.n4"
      >
      <template slot-scope="scope">{{ scope.row.n4 }}</template>
    </el-table-column>
    <el-table-column
      :label="lableList.n5"
      v-if="lableList.n5"
      >
      <template slot-scope="scope">{{ scope.row.n5 }}</template>
    </el-table-column>
    <el-table-column
      :label="lableList.user"
      v-if="lableList.user"
      >
      <template slot-scope="scope">
        <span class="scope-reception">
        {{ scope.row.reception.user }}
        </br>
        <i>
          {{ scope.row.reception.time }}
        </i>
        </span>
      </template>
    </el-table-column>
    <el-table-column
      :label="lableList.n6"
      v-if="lableList.n6"
      >
        <template slot-scope="scope">{{ scope.row.n6 }}</template>
    </el-table-column>
    <el-table-column
      :label="lableList.last"
      v-if="lableList.last"
      >
      <template slot-scope="scope">
        <span v-if="scope.row.edit" class="edit" @click="FnEmit(scope)">
          {{scope.row.edit}}
        </span>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="parameters.currentPage"
      :page-sizes="[10, 15, 30, 50]"
      :page-size="parameters.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="parameters.total">
    </el-pagination>
  </div>
  </div>
</template>

<script>
export default {
  name: '',
  data(){
    return {
      currentPage4: 4,
      multipleSelection: []
    }
  },
  props:[
    'lableList',//表头的数据
    'dataList',//渲染的数据
    'parameters'//参数，页面，总条数，当前页
  ],
  created(){

  },
  mounted(){

  },
  methods:{
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.$emit('bubblingEvent',{type:'pageSize',content:val})
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.$emit('bubblingEvent',{type:'currentPage',content:val})
      },
      FnEmit(e){
        this.$emit("bubblingEvent",{type:'all',content:e.row});//往外冒事件
      },
      FnSelection(val) {
        this.multipleSelection = val;
        this.$emit("bubblingEvent",{type:'delete',content:this.multipleSelection});//往外冒事件
      }
  },
  components:{

  },
  computed:{

  },
  watch:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.customer-management-table {
  .edit {
    font-size: 24px;
    font-weight: 700;
    color: #b4b7bf;
    cursor: pointer;
  }
  .img-box {
    display: inline-block;
    margin-right: 7px;
    width: 45px;
    height: 45px;
    border-radius: 45px;
    overflow: hidden;
    vertical-align: middle;
    img {
      width: 45px;
      height: 45px;
      cursor: pointer;
    }
  }
  .scope-reception {
    font-weight: 600;
    i {
      font-weight: 400;
      font-size: 12px;
      color: #b4b7bf;
    }
  }
  .sex1 {
    color:#0067ed;
  }
  .sex2 {
    color:#ff9232;
  }
  .block {
    margin-top: 20px;
  }
}
</style>
